<!DOCTYPE html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例1</title>
<!--<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />-->
<link rel="stylesheet" type="text/css" href="../css/seven1.css"/>
</head>

<body>
<div id='box'>
      <div id='left'>
          <div id='modelBox'>
              <div class="tab">
                 <ul>
                    <li class="current photo1">模特试镜</li>
                    <li class="photo2">我的相片</li>
                    <li class="photo3">视频相片</li>
                </ul>
              </div>
              <div class="modelList">
                     <div class="faceType">
                        <ul class="normal">
                            <li><a href="javascript:;" data-type="*">全 部</a></li>
                            <li><a href="javascript:;" data-type="1,3">椭圆脸</a></li>
                            <li><a href="javascript:;" data-type="2,4">圆形脸</a></li>
                            <li><a href="javascript:;" data-type="5,7">长形脸</a></li>
                            <li><a href="javascript:;" data-type="6,10">方形脸</a></li>
                            <li><a href="javascript:;" data-type="8,12">瓜子脸</a></li>
                            <li><a href="javascript:;" data-type="9,11">心型脸</a></li>
                        </ul>
                        <div class="active">
                             <ul >
                            <li>全 部</li>
                            <li>椭圆脸</li>
                            <li>圆形脸</li>
                            <li>长形脸</li>
                            <li>方形脸</li>
                            <li>瓜子脸</li>
                            <li>心型脸</li>
                        </ul>
                        </div>
                     </div>
                   <div class="content">
                         <ul>
                            <li><img src='../images/seven1/model_1.jpg' /></li>
                            <li><img src="../images/seven1/model_2.jpg" /></li>
                            <li><img src="../images/seven1/model_3.jpg" /></li>
                            <li><img src="../images/seven1/model_4.jpg" /></li>
                            <li><img src="../images/seven1/model_5.jpg" /></li>
                            <li><img src="../images/seven1/model_6.jpg" /></li>
                            <li><img src="../images/seven1/model_7.jpg" /></li>
                            <li><img src="../images/seven1/model_8.jpg" /></li>
                            <li><img src="../images/seven1/model_9.jpg" /></li>
                            <li><img src="../images/seven1/model_10.jpg" /></li>
                            <li><img src="../images/seven1/model_11.jpg" /></li>
                            <li><img src="../images/seven1/model_12.jpg" /></li>
                        </ul>
                   </div>
              </div>
          
          </div>
            <ul id="tools">
                <li class="open">收缩</li>
                <li class="camera">拍照</li>
                <li class="gauge">瞳距</li>
                <li class="reset">重选</li>
           </ul>
           <div class="mask"></div>
      </div>
  
    
      <div id='right'>
             <div class="search">
                        <div class="selectWrap">
                                  <a class="select" href="javascript:;">品牌</a>
                                  <ul>
                                      <li class="current"><a href="javascript:;">全部</a></li>
                                      <li><a href="javascript:;">佐腾樱花</a></li>
                                      <li><a href="javascript:;">毕加索</a></li>
                                      <li><a href="javascript:;">沙漠之鹰</a></li>
                                      <li><a href="javascript:;">蝙蝠侠</a></li>
                                  </ul>
                        </div>
                      <div class="selectWrap">
                                  <a class="select" href="javascript:;">款式</a>
                                  <ul>
                                      <li class="current"><a href="javascript:;">全部</a></li>
                                      <li><a href="javascript:;">男款</a></li>
                                      <li><a href="javascript:;">女款</a></li>
                                      <li><a href="javascript:;">通过款</a></li>
                                  </ul>
                      </div>
                      <div class="selectWrap">
                                <a class="select" href="javascript:;">脸型</a>
                                <ul>
                                    <li class="current"><a href="javascript:;">全部</a></li>
                                    <li><a href="javascript:;">椭圆脸</a></li>
                                    <li><a href="javascript:;">长形脸</a></li>
                                    <li><a href="javascript:;">方形脸</a></li>
                                    <li><a href="javascript:;">瓜子脸</a></li>
                                    <li><a href="javascript:;">心型脸</a></li>
                                </ul>
                      </div>
                      <div class="selectWrap">
                                <a class="select" href="javascript:;">型号</a>
                                <ul>
                                    <li class="current"><a href="javascript:;">全部</a></li>
                                    <li><a href="javascript:;">40-49(小码)</a></li>
                                    <li><a href="javascript:;">50-53(中码)</a></li>
                                    <li><a href="javascript:;">54-57(大码)</a></li>
                                </ul>
                      </div>
                      <div class="selectWrap">
                                <a class="select" href="javascript:;">框形</a>
                                <ul>
                                    <li class="current"><a href="javascript:;">全部</a></li>
                                    <li><a href="javascript:;">全框</a></li>
                                    <li><a href="javascript:;">半框</a></li>
                                    <li><a href="javascript:;">无框</a></li>
                                    <li><a href="javascript:;">眉框</a></li>
                                </ul>
                      </div>
                      <div class="selectWrap">
                                <a class="select" href="javascript:;">材质</a>
                               <ul>
                                    <li class="current"><a href="javascript:;">全部</a></li>
                                    <li><a href="javascript:;">金属合金</a></li>
                                    <li><a href="javascript:;">板材镜架</a></li>
                                    <li><a href="javascript:;">铁架系列</a></li>
                                    <li><a href="javascript:;">钛架系列</a></li>
                                    <li><a href="javascript:;">记忆镜架</a></li>
                                </ul>
                      </div>
                      <div class="selectWrap">
                          <a class="select" href="javascript:;">价格</a>
                          <ul>
                              <li class="current"><a href="javascript:;">全部</a></li>
                              <li><a href="javascript:;">50以下</a></li>
                              <li><a href="javascript:;">50-100</a></li>
                              <li><a href="javascript:;">100-150</a></li>
                              <li><a href="javascript:;">150-200</a></li>
                              <li><a href="javascript:;">200-300</a></li>
                              <li><a href="javascript:;">300以上</a></li>
                          </ul>
                      </div>
                  <a href="javascript:;" class="btn">点击搜索</a>
           </div>
      <div class="glassList">
            <ul>        
                <li><img src="../images/seven1/glass_1.jpg"><h5>佐腾樱花_ZTYH-001</h5>豹纹色</li>
                <li><img src="../images/seven1/glass_2.jpg"><h5>佐腾樱花_ZTYH-010</h5>蓝色</li>
                <li><img src="../images/seven1/glass_3.jpg"><h5>毕加索_55-2062 C6</h5>绅士黑</li>
                <li><img src="../images/seven1/glass_4.jpg"><h5>毕加索_55-2001 C6</h5>绅士黑</li>
                <li><img src="../images/seven1/glass_5.jpg"><h5>毕加索_55-2068 C11</h5>荧光红</li>
                <li><img src="../images/seven1/glass_6.jpg"><h5>毕加索_55-2051 C11</h5>荧光红</li>
                <li><img src="../images/seven1/glass_7.jpg"><h5>沙漠之鹰_R5152 C16</h5>绅士黑</li>
                <li><img src="../images/seven1/glass_8.jpg"><h5>沙漠之鹰_R5152 CCG</h5>绅士银</li>
                <li><img src="../images/seven1/glass_9.jpg"><h5>沙漠之鹰_R5137 C16</h5>绅士黑</li>  
                <li><img src="../images/seven1/glass_10.jpg"><h5>蝙蝠侠_BM95002 C9D</h5>绅士黑</li>
                <li><img src="../images/seven1/glass_11.jpg"><h5>蝙蝠侠_BM97004 B6</h5>绅士银</li>
                <li><img src="../images/seven1/glass_12.jpg"><h5>蝙蝠侠_BM97004 B1</h5>透明黑</li>        
            </ul>
        </div>
        
     </div>


</div>



<script src="../js/jquery-3.0.0.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/seven1.js"></script>
</body>
</html>
